<template>
  <div class="app-container">
    <data-grid url="/exam/paper/answer/pageList" data-name="listQuery" ref="dataList" @dataRest="onDataRest">
      <template slot="form">
        <el-form-item label="科目">
          <el-select v-model="listQuery.subjectId" class="filter-item" placeholder="请选择..."  @keyup.enter.native="handleFilter" >
            <el-option v-for="item in subjectList" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="listQuery.status"
            class="filter-item"
            placeholder="请选择..."
            @keyup.enter.native="handleFilter"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.key"
              :label="item.key"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </template>

      <!--body-->
      <template slot="body">
        <el-table-column prop="id" label="序号" width="90px" />
        <el-table-column prop="paperName" label="名称" />
        <el-table-column prop="subjectName" label="学科" />
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusTagFilter">{{ scope.row.status | statusFilter }}</el-tag>
            <!-- <el-tag type="info">禁用</el-tag> -->
          </template>
        </el-table-column>
        <el-table-column prop="userScore" label="得分" />
        <el-table-column label="考试时间">
          <template slot-scope="scope">
            <span>{{ scope.row.createdTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="230"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{row}">
            <router-link target="_blank" :to="{path:'/read',query:{id:row.id}}">
              <el-button type="text" size="small">查看</el-button>
            </router-link>
          </template>
        </el-table-column>
      </template>
    </data-grid>
  </div>
</template>

<script>
import { getSubjectList} from "@/api/exam/subject";
import DataGrid from "@/components/DataGrid";
import { parseTime } from "@/utils";
import waves from "@/directive/waves"; // Waves directive

const statusOptions = [
  { key: "完成", value: "2" },
  { key: "待批改", value: "1" }
];
// const erpFlagOptions=[{'key':'否','value':'0'},{'key':'是','value':'1'}]

const statusTypeKeyValue = statusOptions.reduce((acc, cur) => {
  acc[cur.value] = cur.key;
  return acc;
}, {});
// const erpFlagTypeKeyValue = erpFlagOptions.reduce((acc, cur) => {
//   acc[cur.value] = cur.key
//   return acc
// }, {})

export default {
  name: "Subject",
  components: { DataGrid },
  directives: { waves },
  filters: {
    statusFilter(status) {
      return statusTypeKeyValue[status];
    },
    statusTagFilter(status) {
      const statusMap = {
        "1": "success",
        "0": "danger"
      };
      return statusMap[status];
    },
    erpFlagFilter(flag) {
      return erpFlagTypeKeyValue[flag];
    },
    erpFlagTagFilter(flag) {
      const statusMap = {
        "1": "success",
        "0": "info"
      };
      return statusMap[flag];
    },
    parseTime
  },
  data() {
   
    return {
      tableKey: 0,
      total: 0,
      list: null,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        limit: 10,
        subjectId: null,
        status: null
      },
       subjectList: [],
      recordList: [],

      statusOptions: statusOptions,
      // erpFlagOptions:erpFlagOptions,
      recordForm: {
        id: "",
        paperName: "",
        subjectName: "",
        status: "",
        userScore: "",
        createTime: ""
      }

      // currentUserId: null,
      // roleVisible:false,
      // dataNodes: null,
      // defaultSelected: [],
      // roleTreeLoading: false,
      // defaultProps: {
      //   children: "children",
      //   label: "name"
      // }
    };
  },
  watch: {
    // roleVisible(val) {
    //   if(!val){
    //     this.defaultSelected = [];
    //   }
    // }
  },
  created() {
    this.getSubjectList()
  },

  methods: {
    onDataRest() {
      this.listQuery = {};
    },
    handleFilter() {
      this.$refs.dataList.fetchData();
    },
     getSubjectList(){
      // this.listQuery.subjectId = null;
      // let categoryId = this.listQuery.categoryId;
      // let params = {categoryId: categoryId}
      getSubjectList().then(res => {
          if (res.data) {
            this.subjectList = res.data;
          } else {
            this.$message.error(res.code);
          }
        });
    },
   
  }
};
</script>
